.msg-box {
  border-radius: 12px;
  transition:
    background-color 0.2s cubic-bezier(0.4, 0, 0.2, 1),
    color 0.2s cubic-bezier(0.4, 0, 0.2, 1),
    transform 0.15s cubic-bezier(0.4, 0, 0.2, 1);
  color: var(--text-color);
  transform: translateZ(0);
  will-change: background-color, color;
  @apply cursor-pointer transition-all duration-300 ease-in-out;

  &.context-menu-active {
    box-shadow: inset 0 0 0 1px #13987f;
  }

  &.active-context-menu {
    box-shadow: inset 0 0 0 1px #909090;
  }

  .text {
    color: #808080;
    transition: color 0.2s cubic-bezier(0.4, 0, 0.2, 1);
  }

  &:not(.active):hover {
    background: var(--bg-msg-hover);
    border-radius: 12px;
    cursor: pointer;
  }
}

.active {
  background: var(--msg-active-color);
  border-radius: 12px;
  color: #fff;
  transform: translateZ(0); /* 启用硬件加速 */

  .text {
    color: #fff;
  }
}

/** 助手样式 */
.active-bot {
  @apply dark:bg-[#13987f40]! bg-[#e8f4f1]! text-[#13987f]!;
  box-shadow: inset 0 0 0.8px 0.8px #13987f;
}

:deep(.n-badge .n-badge-sup) {
  font-weight: bold;
  font-size: 10px;
}
